<template>
	<view v-if="show">
		<view class="header">
			<view class="tips">
				TIPS
				<view class="img">
					<image src="../../static/icon/tips.png" mode=""></image>
				</view>
			</view>
			<view class="icon">
				<image src="../../static/icon/detail_select.png" mode=""></image>
			</view>
		</view>

		<view class="describe">
			<view class=".m-b-10">
				拍摄高峰可能稍需等待，如您无法按时到店，烦请提前与门店
				联系，我们会尽力协调，门店繁忙时可能无法安排拍摄或需改
				期。
			</view>
			<view class=".m-b-10">
				您可以在服务的各个环节提出您的需求和修改建议，各环节的
				交付成果以您的确认为基准，环节内可调整或重新拍摄，进入
				下一环节后即视为您对本环节的服务交付确认，我们将不再提。
			</view>
		</view>

		<view class="info">
			<view class="info-header">
				<view class="left">
					拍摄人信息
				</view>
				<view class="">

				</view>
			</view>

			<view class="info-content">
				<view class="item">
					<view class="flex--align-center" style="width: 48%;">
						<view class="item-label">
							称呼：
						</view>
						<view class="item-input" style="width: 70%;">
							<input type="text" placeholder="请输入称呼" v-model="order.user.call_name" />
						</view>
					</view>
					<view class="item-tips">
						(请填写真实姓氏方便后续更好服务哦)
					</view>
				</view>
				<!-- <view class="item m-t-16">
					<view class="flex--align-center" style="width: 70%;">
						<view class="item-label">
							生日：
						</view>
						<view class="item-input" style="width: 80%;">
							<picker mode="date" @change="bindDateChange" :value="order.user.birthday">
								<view class="uni-input-placeholder" v-if="!order.user.birthday">{{birthdayPlaceholder}}
								</view>
								<view class="uni-input" v-else>{{order.user.birthday}}</view>
							</picker>
						</view>
					</view>
					<view class="item-img">
						<image src="../../static/icon/detail_select.png" mode=""></image>
					</view>
				</view> -->
				<view class="item m-t-16">
					<view class="flex--align-center" style="width: 70%;">
						<view class="item-label">
							性别：
						</view>
						<view class="item-input" style="width: 80%;">
							<!-- <input type="text" placeholder="请选择您的性别" /> -->
							<picker @change="bindGenderChange" :value="order.user.gender" :range="genderList">
								<view class="uni-input-placeholder"
									v-if="order.user.gender === '' || order.user.gender === null">
									{{genderPlaceholder}}
								</view>
								<view class="uni-input" v-else>{{genderList[order.user.gender]}}</view>
							</picker>
						</view>
					</view>
					<view class="item-img">
						<image src="../../static/icon/detail_select.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<uni-list>
				<uni-list-item showArrow title="优惠券" :clickable="true" @click="couponClick"
					:rightText="coupon_id > 0 && order.coupon_money > 0 ? '-'+ order.coupon_money + '元' : couponList.length+'张可用'" />
			</uni-list>
		</view>

		<view class="reservation-info">
			<view class="rinfo-header">
				预约信息
			</view>
			<view class="rinfo-content">
				<view class="rinfo-product" v-for="(item,index) in order.product_list" :key="index">
					<view class="product-left">
						<view class="product-img">
							<image :src="item.product_sku.img_show" mode="scaleToFill"></image>
						</view>
						<view class="product-info">
							<view class="name text-cut">
								{{item.name}}
							</view>
							<view class="attr" v-if="item.spec_type === '20'">
								{{item.product_sku.product_attr}}
							</view>
						</view>
					</view>
					<view class="product-right">
						<view class="price">
							￥{{ item.product_price }}
						</view>
					</view>
				</view>

				<view class="rinfo-item">
					<view class="text">
						<view>
							预约时间：
						</view>
						<view>
							{{ order.reservation_time_text }}
						</view>
					</view>
					<view class="text m-t-16">
						<view>
							预约门店：
						</view>
						<view>
							{{ order.store.name }}
						</view>
					</view>
					<view class="text m-t-16" v-if="order.order_deposit > 0">
						<view>
							押金：
						</view>
						<view>
							￥{{ order.order_deposit }}
						</view>
					</view>
				</view>

				<view class="rinfo-stat">
					<view class="stat-sub">
						小计：<text>￥{{ order.order_total_price }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-content" @click="payClick">
				<view class="price">
					￥{{ order.order_pay_price }}
				</view>
				<view class="text">
					去支付
				</view>
				<image class="img" src="../../static/icon/topay.png" mode=""></image>
			</view>
		</view>

		<uni-popup ref="couponPopup" :mask-click="false">
			<view class="popup-content">
				<view class="pc-header">
					优惠券
				</view>
				<view class="pc-title">
					我的优惠券
				</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="coupon-list">
						<radio-group class="uni-list" @change="couponChange">
							<label class="cl-li" :style="{'backgroundImage': 'url('+couponBg+')'}"
								v-for="(item,index) in couponList" :key="index">
								<view class="cl-li-left">
									<view class="cl-ll-price">
										<text>￥</text>{{ item.money }}
									</view>
									<view class="cl-ll-text">
										满{{ item.limit }}可用
									</view>
								</view>
								<view class="cl-li-right">
									<view class="cl-lr-content">
										<view class="cl-lr-title text-cut">
											{{ item.name }}
										</view>
										<view class="cl-lr-desc">
											<view v-if="item.range">
												{{ item.range }}
											</view>
											<view class="m-t-10">
												{{ item.validity }}
											</view>
										</view>
									</view>
									<view class="cl-lr-btn">
										<radio :value="index" color="#FF0000" :checked="item.checked" />
									</view>
								</view>
							</label>
						</radio-group>
					</view>
				</scroll-view>

				<view class="pc-footer">
					<view class="pcf-content">
						<view class="pcf-left" @click="couponCancel">
							不使用优惠
						</view>
						<view class="pcf-right" @click="couponConfirm">
							确认使用
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				order: {},
				birthdayPlaceholder: '请选择您的生日',
				genderPlaceholder: '请选择您的性别',
				genderList: ['女', '男'],
				product_id: 0,
				product_sku_id: '',
				reservation_time: '',
				order_id: 0,
				couponList: [],
				coupon_id: 0,
				couponBg: this.domainUrl + '/assets/img/uniapp/coupon/coupon_bg.png',
			}
		},
		onLoad(options) {
			this.product_id = options.product_id
			this.product_sku_id = options.product_sku_id
			this.reservation_time = options.reservation_time
			this.getOrder()			
		},
		methods: {
			getOrder(callback = '') {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				_this.$api.get('meet.order/generateOrderInfo', {
					product_id: _this.product_id,
					product_sku_id: _this.product_sku_id,
					reservation_time: _this.reservation_time,
					coupon_id: _this.coupon_id
				}).then(res => {
					uni.hideLoading()
					if (callback === '') {
						if (res.code == 1) {
							_this.order = res.data
							_this.getCouponList()
							_this.show = true
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								cancelText: '',
								confirmText: '确认',
								success: res => {
									uni.navigateBack({
										delta: 1
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					} else {
						callback(res)
					}

				}, fail => {})
			},
			getCouponList() {
				let _this = this

				_this.$api.get('meet.order/getCouponList', {
					product_ids: _this.order.product_ids,
					limit: _this.order.order_pay_price
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.couponList = res.data.list
					}
				}, fail => {})
			},
			bindDateChange(e) {
				this.order.user.birthday = e.detail.value
			},
			bindGenderChange(e) {
				this.order.user.gender = e.detail.value
			},
			couponClick() {
				if (this.couponList.length > 0) {
					this.$refs.couponPopup.open('bottom')
				}
			},
			couponChange(e) {
				let _this = this
				let value = e.detail.value
				let list = _this.couponList

				list.forEach((i, v) => {
					if (parseInt(value) === parseInt(v)) {
						list[v].checked = true
					} else {
						list[v].checked = false
					}
				})

				_this.couponList = list
				_this.coupon_id = list[value].id
			},
			couponCancel() {
				let _this = this

				_this.couponList.forEach((i, v) => {
					_this.couponList[v].checked = false
				})

				_this.coupon_id = 0

				_this.getOrder((res) => {
					if (res.code == 1) {
						_this.order = res.data
					}
					_this.$refs.couponPopup.close()
				})
			},
			couponConfirm() {
				let _this = this

				if (!_this.coupon_id) {
					_this.toast('请选择优惠券');
					return false
				}

				_this.getOrder((res) => {
					if (res.code == 1) {
						_this.order = res.data
						_this.$refs.couponPopup.close()
					} else {
						_this.toast(res.msg)
					}
				})
			},
			payClick() {
				let _this = this
				uni.showLoading({
					title: '支付中...',
					mask: true
				})

				if (_this.order_id > 0) {
					_this.pay(_this.order_id)
				} else {
					let data = {
						call_name: _this.order.user.call_name,
						birthday: _this.order.user.birthday,
						gender: _this.order.user.gender,
						product_id: _this.product_id,
						product_sku_id: _this.product_sku_id,
						reservation_time: _this.reservation_time,
						coupon_id: _this.coupon_id
					}

					_this.$api.post('meet.order/submit', data).then(res => {
						if (res.code == 1) {
							_this.order_id = res.data.order_id
							_this.pay(res.data.order_id)
						} else {
							uni.hideLoading()
							_this.toast(res.msg)
						}
					}, fail => {})
				}
			},
			pay(order_id) {
				let _this = this

				_this.$api.post('meet.order/pay', {
					order_id: order_id
				}).then(res => {
					if (res.code == 1) {
						if (res.data.status == 1) { //已成功，跳转订单页面
							uni.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								cancelText: '',
								confirmText: '确认',
								success: res => {
									uni.redirectTo({
										url: '/pages/user/reservation/order/order'
									});
								},
								fail: () => {},
								complete: () => {}
							})
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: res.data.config.nonceStr, // 随机字符串
								package: res.data.config.package, // 固定值
								timeStamp: res.data.config.timeStamp, // 时间戳（单位：秒）
								signType: res.data.config.signType,
								paySign: res.data.config.paySign, // 签名，这里用的 MD5/RSA 签名
								success: res => {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										cancelText: '',
										confirmText: '确认',
										success: res => {
											uni.redirectTo({
												url: '/pages/user/reservation/order/order'
											});
										},
										fail: () => {},
										complete: () => {}
									})
								},
								fail: (res) => {
									uni.showModal({
										title: '提示',
										content: '支付失败',
										showCancel: false,
										cancelText: '',
										confirmText: '确认',
										success: res => {
											uni.redirectTo({
												url: '/pages/user/reservation/order/order'
											});
										},
										fail: () => {},
										complete: () => {}
									})
								},
								complete: () => {}
							});
						}
					} else {
						uni.hideLoading()
						_this.toast(res.msg)
					}
				}, fail => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 200rpx;
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}


	.flex--align-center {
		display: flex;
		align-items: center;
	}

	.m-b-10 {
		margin-bottom: 10rpx;
	}
	
	.m-t-10 {
		margin-top: 10rpx;
	}

	.m-t-16 {
		margin-top: 16rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx 40rpx 28rpx 40rpx;

		.tips {
			position: relative;
			width: 88rpx;
			height: 66rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				position: absolute;
				top: 0;
				left: 0;
				width: 88rpx;
				height: 66rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.describe {
		margin: auto 40rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 40rpx 20rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #000000;
	}

	.info {
		margin: auto 40rpx;
		padding-top: 48rpx;

		.info-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-weight: 800;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.info-content {
			margin-top: 14rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 22rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item-label {
					font-weight: 800;
					font-size: 24rpx;
					color: #000000;
				}

				.item-input {
					input {
						font-size: 24rpx;
					}

					.uni-input {
						font-size: 24rpx;
					}

					.uni-input-placeholder {
						font-size: 24rpx;
						color: #8A8A8A;
					}
				}

				.item-tips {
					font-weight: 400;
					font-size: 20rpx;
					color: #35D14A;
				}

				.item-img {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}


		}
	}

	.reservation-info {
		margin: auto 40rpx;
		padding-top: 50rpx;

		.rinfo-header {
			font-weight: 800;
			font-size: 32rpx;
			color: #000000;
		}

		.rinfo-content {
			margin-top: 14rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 30rpx 22rpx;

			.rinfo-product {
				display: flex;
				align-items: start;
				justify-content: space-between;
				padding-bottom: 30rpx;

				.product-left {
					width: 80%;
					display: flex;
					align-items: start;

					.product-img {
						border-radius: 6rpx;
						overflow: hidden;
						width: 96rpx;
						height: 96rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.product-info {
						width: calc(100% - 96rpx);

						.name {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
							margin-left: 18rpx;
						}

						.attr {
							font-weight: 400;
							font-size: 24rpx;
							color: #8A8A8A;
							margin-left: 18rpx;
							margin-top: 5rpx;
						}
					}
				}

				.product-right {
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.rinfo-item {
				padding: 30rpx 0;
				border-top: 2rpx solid #F0F0F0;
				border-bottom: 2rpx solid #F0F0F0;

				.text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 800;
					font-size: 24rpx;
					color: #000000;
				}
			}

			.rinfo-stat {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 36rpx;

				.stat-sub {
					color: #000000;
					font-size: 28rpx;
					font-weight: 800;

					text {
						color: #F73830;
					}
				}
			}
		}
	}

	.list {
		margin: auto 40rpx;
		padding-top: 50rpx;

		.uni-list {
			border-radius: 8rpx;
			overflow: hidden;
		}

		.uni-list--border-top {
			background-color: #FFFFFF;
			height: 0;
		}

		.uni-list--border-bottom {
			background-color: #FFFFFF;
			height: 0;
		}

		.uni-list-item__content-title {
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.footer-content {
			width: 518rpx;
			height: 80rpx;
			background: #000000;
			border-radius: 50rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				margin-left: 24rpx;
			}

			.img {
				margin-left: 16rpx;
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.popup-content {
		width: 100%;
		height: 420px;
		background: #F5F5F5;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.pc-header {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40rpx;
			font-size: 36rpx;
			color: #333333;
		}

		.pc-title {
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.scroll-y {
			height: calc(420px - 79px - 80px);
		}

		.pc-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			/* padding: 32rpx 0; */
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 79px;


			.pcf-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;
				width: 100%;
			}

			.pcf-left {
				width: 50%;
				background-color: #FFFFFF;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 100rpx 0 0 100rpx;
			}

			.pcf-right {
				width: 50%;
				background-color: #000;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 0 100rpx 100rpx 0;
			}
		}

		.coupon-list {
			padding: 0 32rpx 20rpx 32rpx;

			.cl-li {
				width: 100%;
				height: 180rpx;
				border-radius: 16rpx;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				background-size: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.cl-li-left {
					width: 28%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;

					.cl-ll-price {
						font-size: 64rpx;
					}

					.cl-ll-price text {
						font-size: 28rpx;
					}

					.cl-ll-text {
						font-size: 28rpx;
					}
				}

				.cl-li-right {
					width: 67%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.cl-lr-title {
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;
					}

					.cl-lr-desc {
						margin-top: 8rpx;
						color: #999999;
						font-size: 20rpx;
					}

					.cl-lr-btn {
						margin-right: 32rpx;
					}

					.cl-lr-content {
						width: calc(100% - 108rpx - 40rpx);
					}
				}
			}
		}
	}
</style>